<template>
  <div class="buttonAddWrap">
    <el-dialog @opened="$store.commit('dialogTop')" title="新增标签" :visible.sync="dialogFormVisibleAdd" @close="addDialogClose('ruleFormAdd')">
      <el-form :model="ruleFormAdd" :rules="rulesAdd" ref="ruleFormAdd" label-width="80px" class="demo-ruleForm">
        <el-form-item label="备案批次" prop="registerNo" :rules="[{ 'required':true, 'message': '请选择备案批次','trigger': 'blur'  }]">
          <el-select v-model="ruleFormAdd.registerNo" size="mini" @change="getChangeInfo"  clearable placeholder="请选择备案批次">
            <el-option
              v-for="item in PutVehicleList"
              :key="item.registerNo+''"
              :label="item.registerNo"
              :value="item.registerNo+''">
            </el-option>
          </el-select>
        </el-form-item>
        <div v-show="info.enterpriseName">
        <el-form-item label="企业名称" >
          {{info.enterpriseName}}
        </el-form-item>

        <el-form-item label="投放区域" >
          {{info.districtName}}{{info.streetName}}
        </el-form-item>
        <el-form-item label="备案车辆" >
          {{info.registerCount}}
        </el-form-item>
        <el-form-item label="电子标签" >
          {{info.registerCount}}
        </el-form-item>
        </div>
        <el-form-item> </el-form-item>
        <div style="text-align: center;margin-bottom: 3px;">
          <el-button type="primary" @click="submitForm('ruleFormAdd')">提交</el-button>
          <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        </div>
      </el-form>

    </el-dialog>
  </div>
</template>

<script>
  export default {
    props:[],
    data () {
      return {
        PutVehicleList:[],
        info:{},
        ruleFormAdd: {
          "registerNo":"",
        },
        dialogFormVisibleAdd: false,
        rulesAdd: {

        }
      }
    },
    components: {},
    methods: {
      getChangeInfo(){
        if(this.ruleFormAdd.registerNo){
          this.PutVehicleList.forEach(item=>{
            if(this.ruleFormAdd.registerNo==item.registerNo){
              this.info=item
            }
          })
        }else {
          this.info={}
        }
      },
      dialogOpen(){
        this.axios.post(process.env.API_HOST + `/label/selectInsertPutVehicleList`, {})
          .then(response=>{
            let result=response.data
            if(result.code==200){
              this.PutVehicleList=result.result
              this.dialogFormVisibleAdd = true
            }

          })

      },
      //关闭回调
      addDialogClose(formName){
        this.info={}
        this.$refs[formName].resetFields();
      },
      //提交回调
      handleDiaSureAdd(){

        this.axios.post(process.env.API_HOST + `/label/insertLabelAllot`, this.ruleFormAdd)
          .then(response=>{
            if(response.data.code==200){
              this.$message({
                type: 'success',
                message: '添加成功!'
              });
              this.$emit('searchRowsInfo')
              this.dialogFormVisibleAdd = false
            }

          })
          .catch(error=>{
            console.log(error);
          });
      },

      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            this.handleDiaSureAdd()
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" >
  @import "../../../common/stylus/mixin.styl"
  .buttonAddWrap
    display inline-block
    margin-left 10px

</style>
